<template>
    <view class="absolute bg-blackx w-full min-h-full box-border">
        <uv-navbar :bgColor="blackxlight">
            <template v-slot:left>
                <view class="text-whitex text-lg flex items-center" v-if="!auditing" @click="toInbox(0)">
                    <uv-icon name="email" :color="whitex" size="25px"></uv-icon>
                    <text class="text-sm text-whitex">{{top_left_btn}}</text>
                </view>
            </template>
            <template v-slot:center>
                <view class="text-whitex text-lg">
                    {{app_title}}
                </view>
            </template>
        </uv-navbar>
        <view class="topbar">
            <uv-notice-bar :text="notice" direction="column" v-if="notice.length>0"></uv-notice-bar>
        </view>
        <view class="px-4 pt-4">
            <text class="text-whitex text-2xl font-medium">{{greeting}}</text>
        </view>
        <view class="px-4 mt-4">
            <text class="text-whitex text-lg font-medium">{{index_title}}</text>
        </view>
        <view class="flex justify-center w-full box-border">
            <view class="flex flex-wrap w-full box-border">
                <view class="box-border w-1/2 md:w-44 p-4 flex justify-center items-center" v-for="i in sea_list"
                    :key="i.id">
                    <view
                        class="w-40 h-48 rounded-2xl overflow-hidden relative flex-grow-0 flex-shrink-0 animate__animated"
                        :class="i.id == sea_id ?'selected':''" @click="onChoose(i)">
                        <image class="w-full h-full box-border" :src="i.image" mode="aspectFill">
                        </image>
                        <view
                            class="absolute p-2 rounded-b-2xl text-center rounded-t-lg bottom-0 w-full min-h-20 bg-blackx/50 borderx flex flex-col gap-2 justify-center items-center box-border backdrop-blur-sm">
                            <text class="text-whitex">{{i.title}}</text>
                            <text class="text-whitexlight text-xs" v-if="i.desc">{{i.desc}}</text>
                            <view @click="onSeaBtn(i.id)" :class="i.id!=sea_id?'hidden':''"
                                class="bg-bluex text-whitex font-extrabold box-border rounded-full text-center text-xs px-4 py-1">
                                {{ auditing?'点击进入':get_btn}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="fixed bottom-5 w-full box-border flex justify-center px-4" v-if="index_btn_mode==1">
        <view class="w-full md:w-96 flex justify-between items-center px-6 py-2 box-border bg-blackxlight rounded-full">
            <view class="flex flex-row justify-start items-center w-20 gap-1">
                <text class="text-whitex font-extrabold" @click="onInboxBtn()">{{inbox_btn}}</text>
                <uv-badge type="error" max="99" :value="msg_count"></uv-badge>
            </view>
            <view class="w-10" @click="toPublish">
                <plusButton></plusButton>
            </view>
            <view class="flex flex-row justify-end items-center w-20">
                <text class="text-whitex font-extrabold" @click="onMyBtn">{{my_btn}}</text>
            </view>
        </view>
    </view>
    <view class="fixed bottom-5 w-full h-20 box-border flex justify-center items-center px-4" v-if="index_btn_mode!=1">
        <view class="flex-grow-0 flex justify-between items-center p-4 box-border bg-blackxlight rounded-full"
            :class="btn_animation?'animated-padding':''">
            <view class="w-10" @click="toPublish">
                <plusButton></plusButton>
            </view>
        </view>
    </view>
    <sexPopup ref="sexPopup"></sexPopup>
    <!-- #ifdef MP-WEIXIN||H5 -->
    <view class="fixed right-4" :class="index_btn_mode!=1?'bottom-10':'bottom-24'">
        <view class="flex flex-col items-center justify-end gap-4">
            <view class="overflow-hidden rounded-full border-solid border-2 border-whitex">
                <view>
                    <uv-icon name="kefu-ermai" :color="whitex" size="65rpx"></uv-icon>
                    <button class="relative opacity-0" style="margin-top: -65rpx;width: 65rpx;height: 65rpx;"
                        open-type="contact">
                    </button>
                </view>
            </view>
            <view class="overflow-hidden rounded-full border-solid border-2 border-whitex" v-if="index_btn_mode!=1">
                <view>
                    <uv-icon name="more-circle" :color="whitex" size="65rpx"></uv-icon>
                    <button @click="onInboxBtn" class="relative opacity-0"
                        style="margin-top: -65rpx;width: 65rpx;height: 65rpx;">
                    </button>
                </view>
            </view>
        </view>
    </view>
    <!-- #endif -->
</template>

<script>
    import {
        colors
    } from '../../consts/colors'
    import {
        errorCode
    } from '../../consts/datas'
    import {
        events
    } from '../../consts/events'
    import {
        getMsgNotice,
        getNotice,
        inboxGet,
        indexAuthData,
        indexData
    } from '../../http/api'
    export default {
        data() {
            return {
                bluex: colors.bluex,
                whitex: colors.whitex,
                blackxlight: colors.blackxlight,
                greeting: "晚上好,要早点睡哦~",
                sea_list: [],
                index_title: '',
                to_list_btn: '进入查看',
                inbox_btn: '',
                get_btn: '看一个',
                outbox_btn: '',
                top_left_btn: '',
                sea_id: '',
                my_btn: '',
                to_detail_timeout: 2000,
                auditing: true,
                notice: [],
                app_title: "",
                msg_count: 0,
                btn_animation: false,
                user: {
                    sex: null,
                },
                index_btn_mode: 2,
                share_info: {
                    title: '',
                    path: "/pages/index/index",
                    imageUrl: '',
                },
            }
        },
        watch: {
            app_title: function(val) {
                uni.setNavigationBarTitle({
                    title: val
                })
            },
        },
        methods: {
            onMyBtn() {
                uni.navigateTo({
                    url: "/pages/my/my"
                })
            },
            onInboxBtn() {
                uni.navigateTo({
                    url: "/pages/comment_box/comment_box"
                })
            },
            onNavLeftClick() {
                if (this.auditing) {
                    return
                }
                this.toInbox(0)
            },
            showSexPopup() {
                console.log(this.$refs.sexPopup);
                this.$refs.sexPopup.open("bottom")
            },
            doTwinkle() {
                this.btn_animation = true
                setTimeout(() => this.btn_animation = false, 1200)
            },
            onSeaBtn(sea_id) {
                if (this.auditing) {
                    return this.toInbox(sea_id)
                }
                this.toDetail(sea_id)
            },
            getNoticeKey() {
                let key = "wechat"
                // #ifdef MP-TOUTIAO
                key = "douyin"
                // #endif
                // #ifdef APP
                key = "app"
                // #endif
                // #ifdef H5
                key = 'h5'
                // #endif
                return key
            },
            async getNotice() {
                let res = await getNotice()
                let key = this.getNoticeKey()
                let data = res[key]
                this.notice = data?.notice ?? []
            },
            toInbox(seaId) {
                console.log(seaId);
                uni.navigateTo({
                    url: '/pages/inbox/inbox?sea_id=' + seaId,
                })
            },
            async toDetail(sea_id) {
                this.showMatchingLoading()
                const res = await inboxGet({
                    sea_id
                })
                console.log(res);
                setTimeout(() => {
                    this.hideMatchingLoading()
                    if (res.code == errorCode.sex) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message
                        })
                        this.showSexPopup()
                        return
                    }
                    if (res.code == 0) {
                        uni.showToast({
                            icon: "none",
                            title: res.message
                        })
                        return
                    }
                    uni.navigateTo({
                        url: '/pages/detail/detail?id=' + res.data.id,
                    })
                }, this.to_detail_timeout)
            },
            toPublish() {
                if (!this.sea_id) {
                    uni.showToast({
                        title: '请先选择',
                        icon: 'none'
                    })
                    return
                }
                console.log(this.sea_id);
                uni.navigateTo({
                    url: `/pages/publish/publish?sea_id=${this.sea_id}`,
                })
            },
            hideMatchingLoading() {
                uni.hideLoading()
            },
            showMatchingLoading() {
                uni.showLoading({
                    mask: true,
                    title: "匹配中..."
                })
            },
            tadaSea() {
                const id = this.sea_id
                console.log("sea_id", id);
                this.sea_id = 0;
                this.$nextTick(() => this.sea_id = id)
            },
            onTadaSea() {
                uni.$on(events.tadaSea, this.tadaSea)
            },
            onChoose(i) {
                this.sea_id = i.id
                // this.doTwinkle()
            },
            async getData() {
                const res = await indexData()
                const data = res.data
                this.greeting = data.greeting
                this.sea_list = data.sea_list
                this.index_title = data.index_title
                this.sea_id = data.default_sea_id
                this.to_detail_timeout = data.to_detail_timeout ?? 2000
                this.to_list_btn = data.to_list_btn
                this.inbox_btn = data.inbox_btn
                this.auditing = data.auditing
                this.get_btn = data.get_btn
                this.outbox_btn = data.outbox_btn
                this.app_title = data.app_title ?? ''
                this.my_btn = data.my_btn
                this.top_left_btn = data.top_left_btn
                this.index_btn_mode = data.index_btn_mode
                this.share_info = data.share_info
                console.log(res)
            },
            async getMessage() {
                const res = await getMsgNotice()
                this.msg_count = res.data.msg_count
            },
            async doLogin() {
                const app = getApp()
                await app.wechatLogin()
            },
            async getUserInfo() {
                const res = await indexAuthData()
                this.user = res.data.user
                if (this.user.sex == 0 && !this.auditing) {
                    this.showSexPopup()
                }
            },
        },
        onShareAppMessage() {
            return this.share_info
        },
        async onShow() {
            // this.getNotice()
            // setTimeout(this.getMessage, 1000)
        },
        async onLoad() {
            console.log("load index");
            this.onTadaSea()
            // this.doTwinkle()
            await this.getData()
            await this.doLogin()
            await this.getUserInfo()
        }
    }
</script>

<style lang="scss" scoped>
    .borderx {
        @apply border border-whitex/30 border-solid;
    }

    .selected {
        @apply shadow-xl shadow-bluex;
    }

    /* 定义动画 */
    @keyframes paddingAnimation {
        from {
            padding: 0.1rem;
        }

        to {
            padding: 1rem;
        }
    }

    /* 应用动画到元素 */
    .animated-padding {
        animation-name: paddingAnimation;
        animation-duration: 1200ms;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    .topbar {
        @apply w-full left-0 top-0 px-4 box-border mt-24;
        /* #ifdef H5 */
        @apply mt-10;
        /* #endif */
    }
</style>